import React from "react";
//引入封装好的接口
import { personalized } from "../util/axios";
//引入相关的css
import "../assets/css/recomend.css";
//引入路由导航
// import {NavLink} from 'react-router-dom'
//引入静态资源图片
class Recommend extends React.Component {
  constructor() {
    super();
    this.state = {
      //  img:Img1,
      recList: [],
    };
  }
  //组件挂载完成
  componentDidMount() {
    this.getPerSon();
  }
  //封装一个获取歌单的方法
  getPerSon() {
    personalized({
      limit: 6,
    }).then((res) => {
      if (res.code === 200) {
        this.setState({
          recList: res.result,
        });
      }
      // console.log(res,'推荐歌单列表');
    });
  }
  //跳转到列表页事件
  goList(id) {
    //路由嵌套。含有路由配置对象
    // console.log(this.props,'实现跳转');
    //编程式导航 push() 在历史记录中添加一条数据
    //replace 替换当前这条数据
    //go(n)  n是整数
    //goBack()  函数方法
    this.props.history.push("/list/" + id);
    //this.props.history.replace('/list/'+id)
  }
  render() {
    const { recList } = this.state;
    return (
      <div>
        <h1>推荐歌单</h1>
        <div className="recommend">
          {/* {this.state.img}
                <img src={this.state.img} alt=""/> */}
          <ul className="recInfo">
            {/* {recList.map((item) => {
            return (
              <li key={item.id}>
                <img src={item.img} alt="" />
                <p>{item.title}</p>
              </li>
            );
          })} */}
            {/* 通过路由导航进行跳转 */}
            {/* {recList.map((item) => {
            return (
                <NavLink key={item.id} to={'/list/'+item.id}><li >
                <img src={item.img} alt="" />
                <p>{item.title}</p>
              </li></NavLink>
            );
          })} */}
            {/* 编程式导航跳转 */}
            {recList.map((item) => {
              return (
                <li
                  className="recList"
                  onClick={this.goList.bind(this, item.id)}
                  key={item.id}
                >
                  <img src={item.picUrl} alt="" />
                  <p>{item.name}</p>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    );
  }
}
export default Recommend;
